/*
 * @Author: wangtao
 * @Date: 2020-11-09 11:32:02
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-02 11:47:44
 * @Description: 上传/修改回单每一个item
 */
import React, { Component } from 'react';
import { StyleSheet, View, Text, PixelRatio } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
  fontColorBlack,
  fontColorDeepGray,
  fontColorSecDeepGray,
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp,
} from '@/styles';
import { Button } from '@/common';
import ReceiptItemContent from './receipt-item-content';

const { Submit } = Button;

export default class ReceiptItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const {
      isWeighing,
      type,
      addressDetails,
      weightUnit,
      selectImg,
      details,
      onChange,
      addCard,
      deleteCard,
      itemIndex,
      unitOptionsObj,
    } = this.props;
    return (
      <View style={styles.itemWrap}>
        <View style={styles.itemTitleWrap}>
          {type === 'loading' && (
            <>
              <LinearGradient
                colors={['#7EE35E', '#2CBD26']}
                style={[styles.addressMark]}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
              >
                <Text style={{ color: mainBgColorWhite }}>装</Text>
              </LinearGradient>
              <Text style={[styles.addressType]} numberOfLines={1}>
                装货地
              </Text>
            </>
          )}
          {type === 'unloading' && (
            <>
              <LinearGradient
                colors={['#F48F25', '#EB2F2F']}
                style={styles.addressMark}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
              >
                <Text style={{ color: mainBgColorWhite }}>卸</Text>
              </LinearGradient>
              <Text style={[styles.addressType]}>卸货地</Text>
            </>
          )}
          <Text style={[styles.addressDetail]} numberOfLines={1}>
            {addressDetails}
          </Text>
        </View>
        {/*  */}
        {details.map((item, detailsIndex) => {
          return (
            <ReceiptItemContent
              isWeighing={isWeighing}
              type={type}
              selectImg={selectImg}
              deleteCard={() => deleteCard(detailsIndex, itemIndex)}
              onChange={onChange}
              detail={item}
              detailsIndex={detailsIndex}
              itemIndex={itemIndex}
              weightUnit={weightUnit}
              unitOptionsObj={unitOptionsObj}
            />
          );
        })}
        {details.length < 10 && (
          <Submit
            text='+ 添加回单'
            boxStyle={{
              width: px2dp(640),
              height: px2dp(96),
              overflow: 'hidden',
              backgroundColor: '#fff',
              marginLeft: px2dp(30),
              marginBottom: px2dp(32),
              borderRadius: px2dp(48),
              borderColor: '#CDCCC9',
              borderWidth: 1 / PixelRatio.get(),
            }}
            btnStyle={{}}
            btnTextStyle={{
              fontSize: px2dp(36),
              color: fontColorSecDeepGray,
            }}
            onClick={() => {
              addCard(itemIndex);
            }}
          />
        )}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  itemWrap: {
    width: px2dp(702),
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(16),
    marginTop: px2dp(24),
  },
  itemTitleWrap: {
    flexDirection: 'row',
    height: px2dp(110),
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: px2dp(24),
  },
  addressMark: {
    width: px2dp(40),
    height: px2dp(40),
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: px2dp(6),
  },
  addressType: {
    fontSize: px2dp(32),
    color: '#343332',
    marginLeft: px2dp(16),
    fontWeight: 'bold',
  },
  addressDetail: {
    fontSize: px2dp(28),
    color: fontColorDeepGray,
    marginLeft: px2dp(16),
    flex: 1,
    textAlign: 'right',
  },
  itemContentWrap: {
    paddingHorizontal: px2dp(24),
    paddingBottom: px2dp(24),
  },
  itemContentTitle: {
    marginTop: px2dp(8),
    height: px2dp(88),
    lineHeight: px2dp(88),
    fontSize: px2dp(32),
    color: fontColorBlack,
    fontWeight: 'bold',
  },
  itemContentTitleDesc: {
    fontSize: px2dp(28),
    color: fontColorSecDeepGray,
    fontWeight: 'normal',
  },
  inputItemWrap: {
    backgroundColor: mainBgColorLightGray,
    flexDirection: 'row',
    width: px2dp(318),
    height: px2dp(88),
    borderRadius: px2dp(8),
    alignItems: 'center',
    paddingHorizontal: px2dp(24),
  },
  inputLabel: {
    fontSize: px2dp(28),
    color: fontColorSecDeepGray,
  },
  input: {
    flex: 1,
    height: px2dp(88),
    textAlign: 'right',
    paddingRight: px2dp(10),
    fontSize: px2dp(28),
  },
});
